<template>
  <div class="zbox">
    <div class="zregister_cont1"><em>我要定制</em></div>
    <div class="zregister_cont3">
      <!-- 用户id -->
      <div class="in clearFloat">
        <div class="left fl"><img src="../../images/register2.png" /></div>
        <div class="right fl"><input type="text" placeholder="请输入用户ID" /></div>
      </div>
      <!-- 姓名 -->
      <div class="in clearFloat">
        <div class="left fl"><img src="../../images/register2.png" /></div>
        <div class="right fl"><input type="text" placeholder="请输入姓名" /></div>
      </div>
      <!-- 邀请码 -->
      <div class="in in2 clearFloat">
        <div class="left fl"><img src="../../images/register3.png" /></div>
        <div class="right fl"><input type="text" placeholder="请输入邀请码" /></div>
        <div class="yqm"><a href="javascript:;">请输入邀请码</a></div>
      </div>
      <!-- 手机号 -->
      <div class="in in3 clearFloat">
        <div class="left fl"><span>+86</span></div>
        <div class="right fl"><input type="text" placeholder="请输入手机号" /></div>
      </div>
      <!-- 密码 -->
      <div class="in clearFloat">
        <div class="left fl"><img src="../../images/register4.png" /></div>
        <div class="right fl"><input type="text" placeholder="请输入登录密码" /></div>
      </div>
      <!-- 确认密码 -->
      <div class="in clearFloat">
        <div class="left fl"><img src="../../images/register4.png" /></div>
        <div class="right fl"><input type="text" placeholder="请确认密码" /></div>
      </div>
      <!--<div class="xy">轻触下边的“注册”按钮，<br/>即表示您同意<a href="javascript:;">《用户注册协议》</a></div>-->
      <div class="btns"><input type="submit" value="我要定制" /></div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
    import foot from '../../components/footer/footGuide'
    export default {
        name: "custom",
      components:{
        foot
      }
    }
</script>

<style lang="scss"  scoped>
  @import "../../style/common";
  @import "../../style/mixin";
  html{background: #fff}
  .zbox{background: url(../../images/register1.jpg) no-repeat center top;background-size: 100% auto;
    height: 100%;}
  .zregister_cont1{text-align: center;padding-top: 2rem;color: #fff;font-size: 0.24rem;font-weight: bold;letter-spacing: 0.03rem;}
  .zregister_cont1 em{font-size: 0.42rem;color: #fa2f5d;}
  .zregister_cont3{width: 5.75rem;margin: auto;margin-top: 0.4rem;margin-bottom: 2.2rem;}
  .zregister_cont3 .in{margin-top: 0.2rem;border-bottom: solid 1px #cfcfcf;}
  .zregister_cont3 .in .left{height: 0.9rem;line-height: 0.9rem;width: 0.8rem;}
  .zregister_cont3 .in .left img{width: 0.48rem;vertical-align: middle;}
  .zregister_cont3 .in .right{line-height: 0.9rem;width: 4.95rem;height: 0.9rem;}
  .zregister_cont3 .in .right input{border: none;outline: none;background: transparent;color: #333;font-size: 0.28rem;display: block;width: 100%;height: 0.9rem;line-height: 0.9rem;}
  .zregister_cont3 .in2{position: relative;}
  .zregister_cont3 .in2 .right{width: 3rem;}
  .zregister_cont3 .in2 .yqm{position: absolute;right: 0;top: 0;line-height: 0.9rem;height: 0.9rem;}
  .zregister_cont3 .in2 .yqm a{color: #c0c0c0;font-size: 0.22rem;display: block;}
  .zregister_cont3 .in3 .left span{color: #888888;font-size: 0.28rem;}
  .zregister_cont3 .xy{color: #9B9B9B;font-size: 0.22rem;line-height: 0.36rem;text-align: center;margin-top: 0.35rem;}
  .zregister_cont3 .xy a{color: #9B9B9B;}
  .zregister_cont3 .btns{height: 0.78rem;margin-top: 0.4rem;background: #fa2f5d;border-radius: 0.39rem;}
  .zregister_cont3 .btns input{display: block;text-align: center;height: 0.78rem;line-height: 0.78rem;width: 100%;background: transparent;border: none;outline: none;color: #fff;font-size: 0.28rem;}

</style>
